<template>
<div class="login">
  <c-header :title="'登录'"></c-header>
  <div class="login-bd">
    <van-cell-group>
      <van-field v-model="username" label="用户名" icon="clear" placeholder="请输入用户名" required @click-icon="username = ''" />
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" required />
    </van-cell-group>
  </div>
  <div class="login-regist">
      没有账号?注册账号
  </div>
  <div class="login-ft">
    <van-button size="large">登录</van-button>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.login {
  // background-color: #fafafa;
  // height: 100vh;
  &-bd{
    .van-cell-group{
      margin: px2rem(20px) 0;
    }
  }
  &-regist{
    display: block;
    text-align: right;
    padding-right: 10px;
    margin-top: 20px;
    @include font-dpr(12px);
    color: #f44;
    cursor: pointer;
  }
  &-ft{
    width: 60%;
    margin: px2rem(30px) auto;
    >button{
      height: px2rem(80px);
      line-height: px2rem(80px);
      color:#fff;
      background-color:#e82b2b;
    }
  }
}
</style>
